<template>
  <div class="app-container">
    <el-card style="position: relative">
      <RouterHeader
        :title="title()"
        :time="time"
        :status="status"
      ></RouterHeader>
      <div class="concent">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleFormRef"
          label-width="140px"
          label-position="right"
        >
          <div class="concent-title">{{ content }}</div>
          <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="form.todayTask"
            show-word-limit
            rows="5"
          >
          </el-input>
          <div class="concent-title">{{ plan }}</div>
          <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="form.tomorrowTask"
            show-word-limit
            rows="5"
          >
          </el-input>
          <div class="concent-title">需协调工作</div>
          <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="form.needAssiistTask"
            show-word-limit
            rows="5"
          >
          </el-input>
          <div class="concent-title">上传附件/图片</div>
          <div style="width: 40vw">
            <fileupload :modelValue="form.fileQoList" @update:modelValue="handleModelFileLists">
            </fileupload>
            <!-- <indexcategory v-else-if="userStore.deptId == 144" :modelValue="form.fileQoList" @update:modelValue="handleModelFileLists">
            </indexcategory> -->
          </div>

          <div class="concent-title">审批</div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="审批方式">
                <el-radio-group v-model="form.processCheckBo.checkType">
                  <el-radio :label="0">自由审批</el-radio>
                  <el-radio :label="1">逐级审批</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="审批流程">
                <approver
                  :approverList="form.processCheckBo.checkPeopleIds"
                  @handleChooseapprover="handleChooseapprover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="抄送">
                <approver
                  :approverList="form.processCheckBo.copyFor"
                  :isCc="true"
                  @handleChooseapprover="handleChooseapproverCc"
                ></approver>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            style="padding: 20px 0; display: flex; justify-content: center"
          >
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            <!-- v-hasPermi="[' myProject:information:list']" -->
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 选择人员 -->
    <el-dialog
      title="新增成员"
      v-model="detailsvisible"
      :before-close="handleClose"
      width="60%"
      style="background: #fff; height: 100%; margin-bottom: 20px"
    >
      <selectPeople
        :projectUserDtoList="form.projectUserDtoList"
        @selectTable="selectTable"
        @deleteTable="deleteTable"
        @submitSelectForm="submitSelectForm"
        @handleSelectClose="handleSelectClose"
      ></selectPeople>
    </el-dialog>
  </div>
</template>
<script  setup>
import { onMounted } from "vue";
import RouterHeader from "@/components/RouterHeader";
import { useRouter, useRoute } from "vue-router";
import selectPeople from "@/components/selector/selectPeople.vue";
import approver from "@/components/Approve/approver.vue";
import { reportAdd, dailyDetails } from "@/api/information/daily";
import { ElMessageBox, ElMessage } from "element-plus";
import fileupload from "@/components/FileUpload/index";
import indexcategory from "@/components/FileUpload/indexcategory";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

const title = () => {
  if (route.query.type === "1") {
    return "我的日报";
  } else if (route.query.type === "2") {
    return "我的周报";
  } else {
    return "我的月报";
  }
};
const content = ref("");

const handelContent = () => {
  if (route.query.type === "1") {
    return (content.value = "今日完成工作");
  } else if (route.query.type === "2") {
    return (content.value = "本周完成工作");
  } else {
    return (content.value = "本月工作总结");
  }
};

const plan = ref("");

const handelPlan = () => {
  if (route.query.type === "1") {
    return (plan.value = "明日工作计划");
  } else if (route.query.type === "2") {
    return (plan.value = "下周工作计划");
  } else {
    return (plan.value = "下月工作计划");
  }
};

let time = ref("");
let status = ref("");

const ruleFormRef = ref();

const form = reactive({
  todayTask: "",
  tomorrowTask: "",
  needAssiistTask: "",
  fileQoList: [], //附件
  processCheckBo: {
    checkPeopleIds: [], //审核人id列表
    copyFor: [], //抄送人id列表
    checkType: 1,
  },
});

// 取消
const resetForm = () => {
  // 2.跳转到对应的tab栏的列表，返回上一步
  router.back();
};

const handleChooseapproverCc = (id) => {
  if (id) {
    form.processCheckBo.copyFor = id;
  }
};

const handleChooseapprover = (id) => {
  if (id) {
    form.processCheckBo.checkPeopleIds = id;
  }
};

// 附件
const handleModelFileLists = (val, result, operationType) => {
  if (operationType === "success") {
    if (result) {
      form.fileQoList = [];
      result.forEach((item)=>{
        form.fileQoList.push(item);
      });
    }
  } else if (operationType === "delete") {
    form.fileQoList.splice(result, 1);
  }
};

// 确认填写日报
const submitForm = async (formEl) => {
  if (route.query.id) {
    form.id = route.query.id;
  }

  let newArray = [];
  let userCcIds;
  let userIds;
  let requestPayload;
  // 编辑默认回显的时候 审批人
  if (form.processCheckBo.checkPeopleIds) {
    userIds = form.processCheckBo.checkPeopleIds.map((item) =>
      item.userId ? Number(item.userId) : item
    );
  }
  if (form.processCheckBo.copyFor) {
    userCcIds = form.processCheckBo.copyFor.map((item) =>
      item.userId ? Number(item.userId) : item
    );
  }

  if (form.processCheckBo.checkType === 1) {
    newArray = form.processCheckBo.checkPeopleIds.map((item, index) => {
      return {
        orderNum: index + 1,
        userId: item.userId ? Number(item?.userId) : item,
      };
    });
    requestPayload = {
      ...form,
      processCheckBo: {
        orderCheckPeopleInfoList: newArray, // 直接作为顶层属性
        copyFor: userCcIds, // 直接作为顶层属性
        checkType: form.processCheckBo.checkType,
      },
    };
  } else {
    requestPayload = {
      ...form,
      processCheckBo: {
        checkPeopleIds: userIds, // 设置新的 checkPeopleIds 属性值
        copyFor: userCcIds,
        checkType: form.processCheckBo.checkType,
      },
    };
  }

  const response = await reportAdd(requestPayload);
  if (response.code === 200) {
    // 添加成功的提示
    ElMessage.success(response.msg);
    // 2.跳转到对应的tab栏的列表，返回上一步
    router.back();
  } else {
    ElMessage.error(response.msg);
  }
};
// 详情
const handelDetails = async () => {
  const response = await dailyDetails(route.query.id);
  if (response.code === 200 && response.data) {
    for (let key in form) {
      if (response.data[key]) {
        form[key] = response.data[key];
      }
    }
    form.fileQoList = response.data.projectFileList;
    // form.processCheckHistoryId =
    //   response.data.dataCheckInfo.processCheckHistoryId;
    // if (route.query.name === "5") {
    //   response.data.dataCheckInfo.opinons.forEach((item) => {
    //     form.approvalFiles = item.fileList;
    //   });
    // }
  }
};

onMounted(async () => {
  await handelContent();
  await handelPlan();
  if (route.query.edit === "2") {
    await handelDetails();
  }
  if (route.query.time || route.query.state) {
    time.value = route.query.time;
    status.value = route.query.state;
    // console.log(status.value);
  }
});
</script>
<style lang="scss" scoped>
.concent {
  margin-top: 10px;
  .concent-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 20px;
  }
}
</style>